<template>
  <div id="ldzblefttopPanel">
    <div style="overflow:auto;overflow-x:hidden;">
      <el-row>
        <el-col :span="12">
          <div class="data_info">
            <div class="fl">
              <img src="../../assets/images/ldzb/gailv1.png" alt="">
              <div class="fl count">
                <p>城市绿地率</p>
                <p class="unit-baifenbi ">
                  <count-to v-if="ldzb0100"
                    :startVal='startVal'
                    :endVal='ldzb0100'
                    :duration='durationtime'
                    :decimals="decimalspoint" />                  
                  </p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="data_info">
            <div class="fl">
              <img src="../../assets/images/ldzb/gongyuan.png" alt="">
              <div class="fl count">
                <p>人均公园绿地面积</p>
                <p class="unit-mianji">
                  <count-to v-if="ldzb0300"
                    :startVal='startVal'
                    :endVal='ldzb0300'
                    :duration='durationtime'
                    :decimals="decimalspoint" />                </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="data_info">
            <div class="fl">
              <img src="../../assets/images/ldzb/gailv2.png" alt="">
              <div class="fl count">
                <p>城市绿化覆盖率</p>
                <p class="unit-baifenbi">
                  <count-to v-if="ldzb0200"
                    :startVal='startVal'
                    :endVal='ldzb0200'
                    :duration='durationtime'
                    :decimals="decimalspoint" />
                </p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="data_info">
            <div class="fl">
              <img src="../../assets/images/ldzb/gailv1.png" alt="">
              <div class="fl count">
                <p>公园绿化活动场地服务半径覆盖率</p>
                <p class="unit-baifenbi">
                  <count-to v-if="ldzb0400"
                  :startVal='startVal'
                  :endVal='ldzb0400'
                  :duration='durationtime'
                  :decimals="decimalspoint" />
                </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="data_info">
            <div class="fl">
              <img src="../../assets/images/ldzb/gailv1.png" alt="">
              <div class="fl count">
                <p>城市绿道服务半径覆盖率</p>
                <p class="unit-baifenbi">
                  <count-to v-if="ldzb0500"
                  :startVal='startVal'
                  :endVal='ldzb0500'
                  :duration='durationtime'
                  :decimals="decimalspoint" />
                </p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="data_info">
            <div class="fl">
              <img src="../../assets/images/ldzb/gongyuan_jingdian.png" alt="">
              <div class="fl count">
                <p>10万人拥有综合公园个数</p>
                <p class="unit-geshu" style="color: gray;">
                  <count-to v-if="ldzb0600"
                  :startVal='startVal'
                  :endVal='ldzb0600'
                  :duration='durationtime'
                  :decimals="decimalspoint" />
                </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="data_info">
            <div class="fl">
              <img src="../../assets/images/ldzb/lvdao3.png" alt="">
              <div class="fl count">
                <p>万人拥有绿道长度</p>
                <p class="unit-gongli">
                  <count-to v-if="ldzb0501"
                  :startVal='startVal'
                  :endVal='ldzb0501'
                  :duration='durationtime'
                  :decimals="decimalspoint" />
                </p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="data_info">
            <div class="fl">
              <img src="../../assets/images/ldzb/gailv1.png" alt="">
              <div class="fl count">
                <p>城市生物多样性保护达标率</p>
                <!-- <p class="unit-baifenbi" style="color: gray;">{{ldzb0800}}</p> -->
                <p class="unit-baifenbi" style="color: gray;">
                  <count-to v-if="ldzb0800"
                  :startVal='startVal'
                  :endVal='ldzb0800'
                  :duration='durationtime'
                  :decimals="decimalspoint" />
                </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="data_info" style="min-width: 800px;">
            <div class="fl">
              <img src="../../assets/images/ldzb/gailv1.png" alt="">
              <div class="fl count">
                <p>城市生态廊道达标率</p>
                <!-- <p class="unit-baifenbi" style="color: gray;">{{ldzb0700}}</p> -->
                <p class="unit-baifenbi" style="color: gray;">
                  <count-to v-if="ldzb0700"
                  :startVal='startVal'
                  :endVal='ldzb0700'
                  :duration='durationtime'
                  :decimals="decimalspoint" />
                </p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
  </div>
</div>
</template>
<script>
  import {getStatldzbstat} from "../../api/ldzb/ldzb.js";
  import { getDicts } from "../../api/system/dict/data";
  import { EleResize } from "@/utils/esresize";
  import CountTo from 'vue-count-to'

  export default {
    name: 'lefttopPanel',
    props: {
      paramObj: { default: () => { } },
    },
    components: {
      CountTo,
    },
    data() {
      return {
        ldzbdata:undefined,
        ldzb0100:undefined,
        ldzb0200:undefined,
        ldzb0300:undefined,
        ldzb0400:undefined,
        ldzb0500:undefined,
        ldzb0501:undefined,
        ldzb0600:undefined,
        ldzb0700:undefined,
        ldzb0800:undefined,
        // count to 动画效果：间隔时间、保留小数位数\
        durationtime:1000,
        decimalspoint:2,
        startVal:0,
      }
    },
    mounted() {
      let _self = this;
      setTimeout(() => {
        _self.getData();
        }, 800);
    // 间隔调用 Vue CountTo
    this.intervalId = setInterval(() => {
      this.startVal = Math.random(); // 随机生成一个 0 到 1 的数作为目标值
    }, 60000);
    },
    beforeDestroy() {
    // 清除间隔调用
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
    },
    methods: {
      async getData(){
        let _self = this
        // 先构建用于查询数据的查询参数对象
        let query = _self.paramObj;
        _self.ldzbdata = undefined;
        _self.ldzb0100 = undefined;
        _self.ldzb0200 = undefined;
        _self.ldzb0300 = undefined;
        _self.ldzb0400 = undefined;
        _self.ldzb0500 = undefined;
        _self.ldzb0501 = undefined;
        _self.ldzb0600 = undefined;
        _self.ldzb0700 = undefined;
        _self.ldzb0800 = undefined;
        let resultdata = await getStatldzbstat(query);
        _self.ldzbdata = resultdata.data
        // console.log(_self.ldzbdata);

        for (let index = 0; index < _self.ldzbdata.length; index++) {
          const element = _self.ldzbdata[index];
          if (element.statldzbcode == '0100'){
            _self.ldzb0100 =  parseFloat(element.statvalue);
            // console.log(_self.ldzb0100);
            // Math.round(parseFloat(element.statvalue), 2)
          }
          if (element.statldzbcode == '0200'){
            _self.ldzb0200 = parseFloat(element.statvalue);
          };
          if (element.statldzbcode == '0300'){
            _self.ldzb0300 = parseFloat(element.statvalue);
          };
          if (element.statldzbcode == '0400'){
            _self.ldzb0400 = parseFloat(element.statvalue);
          };
          if (element.statldzbcode == '0500'){
            _self.ldzb0500 = parseFloat(element.statvalue);
          };
          if (element.statldzbcode == '0501'){
            _self.ldzb0501 = parseFloat(element.statvalue);
          };
          if (element.statldzbcode == '0600'){
            _self.ldzb0600 = parseFloat(element.statvalue);
          };
          if (element.statldzbcode == '0700'){
            _self.ldzb0700 = parseFloat(element.statvalue);
          };
          if (element.statldzbcode == '0800'){
            _self.ldzb0800 = parseFloat(element.statvalue);
          };
        }
      }
    },
  }
</script>
<style>
#ldzblefttopPanel .el-row {
    margin-top: 10px;
    margin-bottom: 5px;
}
#ldzblefttopPanel .fl {
    float: left;
}
#ldzblefttopPanel .data_info{
    width: 12.5%;
    height: 70px;
    margin-left: 5px;
    min-width: 650px;
    margin-top: 5px;
}

#ldzblefttopPanel .data_info  div{
    width: 50%;
    position: relative;
}
#ldzblefttopPanel .data_info img{
    position: absolute;
    top: 10px;
    width: 50px;
}
#ldzblefttopPanel .data_info .count{
    margin-left: 65px;
    margin-top: 0px !important;
}
#ldzblefttopPanel .data_info .count p{
  margin: 5px 0px 5px 0px;
}
#ldzblefttopPanel .data_info .count p:nth-child(1){
    font-size: 18px;
    font-weight: normal;
    color: #fff;
    margin: 5px;
}
#ldzblefttopPanel .data_info .count p:last-child{
    font-family: DigifaceWide;
    color: #FFF233;
    text-shadow: 0 0 25px #00fbfe;
    font-size: 30px;
    font-weight: bolder;

}
#ldzblefttopPanel .data_info .unit-baifenbi:after,
  .unit-mianji:after,
  .unit-geshu:after,
  .unit-gongli:after{
  display: inline-block;
    /* margin-left: 4%; */
    font-size: 16px;
    color: #fff;
    content: '%';
    font-weight: normal;
    text-shadow:none;
    font-family: '微软雅黑';
}
#ldzblefttopPanel .data_info .unit-baifenbi:after{
    content: '%';
}
#ldzblefttopPanel .data_info .unit-mianji:after{
    content: 'm²';
}
#ldzblefttopPanel .data_info .unit-geshu:after{
    content: '个';
}
#ldzblefttopPanel .data_info .unit-gongli:after{
    content: '公里';
}
</style>
